<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/coupon.css"/>


    <script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>
  

    <style>
        .ng-scope input {
            width: 232px;
            margin-left: 5px;
            opacity: 1;
        }
        #img{
            opacity: 0;
        }
        .img {
            width: 375px;
            height: 315px;
            display: inline-block;
            background-size: 100%;
        }
        .fm{
            width: 318px;
            height: 203px;
            display: inline-block;
            background-size: 100%;
        }
        .addcate,.addcdlist{
            height: 34px;
            line-height: 34px;
            border: 1px solid #4cd0ff;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
            display: inline-block;
            color:#4cd0ff;
            margin-right: 8px;
            padding:0 3px;
        }
        @media (min-width: 768px) {
            .modal-dialog {
                width: 600px;
                margin: 200px auto;
            }
        }
        .fllist{
            margin: 10px;
            display: inline-block;
            border: 1px solid #c7c7c7;
            padding: 7PX;
        }
        .glyphicon-remove-circle{
            color: #ff5656;
        }
        .ng-scope input {
            width:70%;
            margin-left: 5px;
            opacity: 1;
        }

        .addcardlist{
            padding:7px 7px;
        }
        .ant-upload-list-item-info {
            background: transparent;
            position: relative;
            width: 120px;
            height: 96px;
            margin: 0 8px 8px 0;
            border-radius: 6px;
            overflow: hidden;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">

        <div class="panel mgl15 mgr15">
            <div class="panel-body">
                <!--路径导航-->
                <ol class="breadcrumb">
                    <li>当前位置是&nbsp;:</li>
                    <li>
                        <a href="{:url('cardgifts/cardgiftracklist')}">货架管理</a>
                    </li>
                    <li class="active" style="color: #02b87f;">货架设置</li>
                </ol>
                <div>


                    <div class="panel panel-default ng-scope">
                        <form action="" method="post"  id="formcate">
                            <div class="panel-heading">
                                发布设置
                            </div>
                            <div class="panel-body">
                                <div class="row">

                                    <div class="col-sm-12">
                                        <div id="myAlert" class="alert alert-success" style="margin:10px 20px;">
                                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                                            <strong id="">点击发布礼品卡货架将在所有平台发布！</strong>
                                        <br>
                                            <strong id="url"></strong>
                                        </div>

                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">是否发布：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <!--<input type="hidden" name="support_buy_for_self" value="0" id="support_buy_for_self">-->

                                                    <!--<div class="switch" id="self" data-animated="true" data-on-label="是" data-off-label="否">-->

                                                        <!--<input type="checkbox" id="se" />-->

                                                    <!--</div>-->
                                                    <button class="btn btn-success" type="button" id="btns" >发布</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">查看货架二维码：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <button class="btn btn-success" type="button" onclick="showModal(this)"  >  <span class="glyphicon glyphicon-qrcode"  ></span></button>

                                                    <!--<input type="hidden" name="support_buy_for_self" value="0" id="support_buy_for_self">-->

                                                    <!--<div class="switch" id="self" data-animated="true" data-on-label="是" data-off-label="否">-->

                                                    <!--<input type="checkbox" id="se" />-->

                                                    <!--</div>-->
                                                </div>
                                            </div>
                                        </div>
                                        <div id="myAlert1" class="alert alert-success" style="margin:10px 20px;">
                                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                                            <strong>点击上架/下架礼品卡货架将在所有平台上架/下架！</strong>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label" id="text">
                                                    {eq name="$rack['statu']" value="1"}
                                                    已上架
                                                    {else/}
                                                    已下架
                                                    {/eq}
                                                    ：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <!--<input type="hidden" name="support_buy_for_self" value="0" id="_self">-->

                                                    <!--<div class="switch" id="sel" data-animated="true" data-on-label="是" data-off-label="否">-->

                                                        <!--<input type="checkbox"  />-->

                                                    <!--</div>-->
                                                    <button class="btn btn-danger" type="button" onclick="del();" id="btn">
                                                    {eq name="$rack['statu']" value="1"}
                                                        下架
                                                        {else/}
                                                        上架
                                                    {/eq}

                                                    </button>

                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>

                            </div>
                            <!--<div class="panel-footer">-->
                                <!--<button class="btn btn-success" type="button" onclick="btn();">保存</button>-->
                            <!--</div>-->
                        </form>
                    </div>

                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    二维码
                </h4>
            </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">
                            二维码
                        </a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <div id="qrcode"style="width:230px;height:auto;  display: block; margin: 15px auto;"></div>
                        <!--<a href=""  id="codeone">-->
                        <!--<button type="button" class="btn btn-primary" style="display: block;margin:0 auto;">-->
                        <!--点击下载-->
                        <!--</button>-->
                        <!--</a>-->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="__STATIC_URL__/static/js/jquery.qrcode.min.js"></script>

<script>
    function showModal(id){
        $.ajax({
            url: "{:url('cardgifts/getcardrack')}",
            data: "",
            type: "post",
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    var url1 = data.data.page_url

                    jQuery(function(){
                        jQuery('#qrcode').qrcode(url1);

                    })
//        $("#codeone").attr("href", url1);
                    if(url1){
                        $('#myModal').modal('show')
                    }else{
                        layer.alert("二维码不存在")
                    }


                }
            }
        })


    }

    $(function () {

        $('#myModal').on('hide.bs.modal', function () {
//            $("#home img").attr("src", '');
            jQuery(function(){
                jQuery('#qrcode').qrcode();

            })
//            $("#codeone").attr("href", '#');
        });
    })
</script>




<script>
    $("#multi").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#support_multi").val("1");
        }else{
            $("#support_multi").val("0");
        }
    });
    $("#self").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#support_buy_for_self").val("1");
        }else{
            $("#support_buy_for_self").val("0");
        }
    });
</script>
<script>
  $("#btns").on("click",function(){

        $.ajax({
            url: "{:url('cardgifts/cardrackputs')}",
            type: "post",
            data: $("#formcate").serialize(),
            success: function (data) {
                console.log(data);
                if(data.code==0){
                    layer.msg(data.message);

                    $.ajax({
                        url: "{:url('cardgifts/getcardrack')}",
                        data: "",
                        type: "post",
                        success: function (data) {
                            console.log(data);
                            if (data.code == 0) {
                             $("#url").html("发布成功后请等待5-10分钟查看预览。您的礼品卡货架链接为："+data.data.page_url)
                            }
                        }
                    })


                }else{
                    layer.msg(data.message);
                }
            }
        })
    })
    function del(){

        $.ajax({
            url: "{:url('cardgifts/cardrackstatu')}",
            type: "post",
            data: {},
            success: function (data) {
                console.log(data);
                if(data.code==0){
                    if(data.message=="上架"){
                      $("#btn").html("下架");
                        $("#text").html("已上架：<span class='glyphicon glyphicon-asterisk glyphicon-tip'></span>");

                    }else{
                        $("#btn").html("上架");
                        $("#text").html("已下架：<span class='glyphicon glyphicon-asterisk glyphicon-tip'></span>");
                    }
                    layer.msg(data.message);

                }else{
                    layer.msg(data.message);
                }
            }
        })
    }
</script>
</body>

</html>
